<template>
  <div class="product-main">
    <el-card class="box-card card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>条件查询</span>
      </div>
      <el-row :guttar="20">
        <el-col :span="6">
          <el-input v-model="page.gname" size="small" type="text" placeholder="商品名称/模糊查询" />
        </el-col>
        <el-col :span="6">
          <el-input v-model="page.pcode" size="small" type="text" placeholder="商品编码" />
        </el-col>
        <el-col :span="6">
          <el-select v-model="value" size="small" placeholder="品牌">
            <el-option
              v-for="item in brandList"
              :key="item.value"
              :label="item.label"
              :value="item.cname"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="kind" size="small" placeholder="分类">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6" :offset="3">
          <el-button size="small">重置</el-button>
          <el-button size="small" type="primary" @click="find">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 列表 -->
    <el-card class="product-list card" shadow="never">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="goAdd">新增</el-button>
      </div>
      <el-table :data="productList" border style="width: 100%">
        <el-table-column fixed type="index" label="#" width="150" />
        <el-table-column fixed label="商品图片" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.cover_img" alt="">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="200">
          <template slot-scope="scope">
            <p>{{ scope.row.gname }}</p>
            <p>品牌：{{ scope.row.brand_id }}</p>
            <p>{{ scope.row.descr }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="province" label="标签" width="120">
          <template slot-scope="scope">
            上架：<el-switch v-model="scope.row.isshow" :active-value="1" :inactive-value="0" />
            最热：<el-switch v-model="scope.row.ishot" :active-value="1" :inactive-value="0" />
            最新：<el-switch v-model="scope.row.isnew" :active-value="1" :inactive-value="0" />
          </template>
        </el-table-column>
        <el-table-column label="价格货号" width="120">
          <template slot-scope="scope">
            <p>价格：{{ scope.row.price_now }}</p>
            <p>货号：{{ scope.row.pcode }}</p>
            <p>排序：{{ scope.row.sort }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="ctitles" label="所属分类" width="150" />
        <el-table-column prop="origin_city" label="原产地" width="120" />
        <el-table-column prop="addtime" label="添加时间" width="120" />
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
            <el-button type="primary" @click="goEdit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import { productList, deleteProduct } from '@/api/product'
import { brandList } from '@/api/brand'
export default {
  components: {

  },
  data() {
    return {
      options2: [],
      brand: '',
      kind: '',
      productList: [], // 商品列表
      brandList: [], // 品牌列表
      value: '', // 品牌对应的值
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0,
        gname: '',
        pcode: ''
      }
    }
  },
  computed: {

  },
  created() {
    this.getProductList()
    this.getBrandList()
  },
  mounted() {

  },
  methods: {
    // 添加商品
    goAdd() {
      this.$router.push({ name: 'productAdd' })
    },
    // 编辑商品
    goEdit(id) {
      console.log(id)
      this.$router.push({ name: 'productEdit', params: { id }})
    },
    // 删除商品
    handleClick(row) {
      // console.log(row);
      this.$confirm('确认删除？')
        .then((_) => {
          deleteProduct({
            id: row.id
          }).then(res => {
            console.log(res)
            this.$message.success('删除成功')
            this.getProductList()
          })
        })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.limit = val
      this.getProductList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.start = val
      this.getProductList()
    },
    // 商品列表
    getProductList() {
      productList({
        start: this.page.start,
        limit: this.page.limit,
        pcode: this.page.pcode,
        gname: this.page.gname
      }).then(res => {
        console.log(res)
        this.productList = res.data.list
        this.page.totalCount = res.data.totalRow
      })
    },
    // 查找商品
    find() {
      this.page.start = 1
      this.getProductList()
    },
    // 品牌列表
    getBrandList() {
      brandList({
        start: this.page.start,
        limit: this.page.limit
      }).then(res => {
        console.log(res)
        this.brandList = res.data.list
      })
    }

  }
}
</script>

<style scoped lang="scss">
  .product-main{
    .card{
    margin:30px;
  }
    .el-col{
      padding:10px;
      width:180px;
    }
  }
  .product-list {
    img{
      width:120px;
      height: 120px;
    }
  }
  .block{
    margin:10px;
    text-align:right;
  }

</style>
